<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <style>
        body {
            background-color: #f2f2f2;
        }
        .background-image-box {
            position: relative;
            width: 768px;
            height: 1024px;
            margin: 0 auto;
        }
        .background-image-box::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('背景.jpg');
            background-size: cover;
            background-position: center;
            opacity: 0.5;
            z-index: -1;
        }
        .name-box1 {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 200px;
            height: 40px;
            background-color: rgba(255, 0, 0, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .name-box2 {
            position: absolute;
            top: 20px;
            left: 240px;
            width: 350px;
            height: 40px;
            background-color: rgba(255, 128, 0, 0.6);
            border-radius: 20px;
            z-index: 1;
        }
        .work-box1 {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 140px;
            height: 40px;
            background-color: rgba(0, 191, 255, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .work-box2 {
            position: absolute;
            top: 70px;
            right: 20px;
            width: 140px;
            height: 40px;
            background-color: rgba(0, 191, 255, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .work-box3 {
            position: absolute;
            top: 120px;
            right: 20px;
            width: 140px;
            height: 40px;
            background-color: rgba(0, 191, 255, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-box1 {
            position: absolute;
            top: 70px;
            left: 240px;
            width: 350px;
            height: 410px;
            background-color: rgba(255, 234, 0, 0.4);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox1 {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 350px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox2 {
            position: absolute;
            top: 60px;
            left: 10px;
            width: 80px;
            height: 40px;
            background-color: rgb(255, 191, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox3 {
            position: absolute;
            top: 110px;
            left: 10px;
            width: 80px;
            height: 40px;
            background-color: rgb(255, 191, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox4 {
            position: absolute;
            top: 160px;
            left: 10px;
            width: 80px;
            height: 40px;
            background-color: rgb(255, 191, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox5 {
            position: absolute;
            top: 210px;
            left: 10px;
            width: 80px;
            height: 40px;
            background-color: rgb(255, 191, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox6 {
            position: absolute;
            top: 260px;
            left: 10px;
            width: 80px;
            height: 40px;
            background-color: rgb(255, 191, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox7 {
            position: absolute;
            top: 310px;
            left: 10px;
            width: 80px;
            height: 40px;
            background-color: rgb(255, 191, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox8 {
            position: absolute;
            top: 360px;
            left: 10px;
            width: 80px;
            height: 40px;
            background-color: rgb(255, 191, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox11 {
            position: absolute;
            top: 8px;
            left: 100px;
            width: 40px;
            height: 340px;
            background-color: rgba(77, 255, 1, 0);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox12 {
            position: absolute;
            top: 8px;
            left: 160px;
            width: 40px;
            height: 340px;
            background-color: rgba(77, 255, 1, 0);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox13 {
            position: absolute;
            top: 8px;
            left: 220px;
            width: 40px;
            height: 340px;
            background-color: rgba(77, 255, 1, 0);
            border-radius: 20px;
            z-index: 1;
        }
        .att-inbox14 {
            position: absolute;
            top: 8px;
            left: 280px;
            width: 40px;
            height: 340px;
            background-color: rgba(77, 255, 1, 0);
            border-radius: 20px;
            z-index: 1;
        }
        .equip-box {
            position: absolute;
            top: 280px;
            left: 20px;
            width: 200px;
            height: 400px;
            background-color: rgba(0, 251, 247, 0.5);
            border-radius: 20px;
            z-index: 1;
        }
        .text1 {
        position: absolute;
        top: 50%;
        left: 50%; /* 设置 left 为 50% 实现水平居中 */
        transform: translate(-50%, -50%); /* 使用 transform 属性水平垂直居中 */
        color: rgb(0, 0, 0);
        font-size: 30px;
        text-align: center;
        font-family: "宋体", sans-serif;
        white-space: nowrap; /* 防止文字换行 */
        overflow: hidden; /* 隐藏溢出部分 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        }
        .text2 {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        color: rgb(0, 0, 0);
        font-size: 30px;
        text-align: center;
        font-family: sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
        .text3 {
        position: absolute;
        top: 0;
        left: 10px;
        color: rgb(0, 0, 0);
        font-size: 32px;
        text-align: center;
        font-family: "黑体", sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
        .att-text1 {
        position: absolute;
        top: -3px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        line-height: 50px;
        color: rgb(0, 0, 0);
        font-size: 28px;
        text-align: center;
        font-family: "宋体", sans-serif;
        white-space: nowrap;
        }
        .equip-text1 {
        position: absolute;
        top: 1px;
        left: 0px;
        width: 60px;
        line-height: 40px;
        color: rgb(0, 0, 0);
        font-size: 24px;
        text-align: center;
        font-family: sans-serif;
        white-space: nowrap;
        }
        .equip-text2 {
        position: absolute;
        top: 1px;
        left: 105px;
        transform: translateX(-50%);
        width: 100px;
        line-height: 40px;
        color: rgb(0, 0, 0);
        font-size: 20px;
        text-align: center;
        font-family: "宋体", sans-serif;
        white-space: nowrap;
        }
        .circle-container {
        position: absolute;
        top: 70px;
        left: 20px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
        }
        .circle-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="background-image-box">
        <div class="name-box1">
            <div class="text1">UID:这里是UID</div>
        </div>
        <div class="name-box2">
            <div class="text1">这里是名字</div>
        </div>
        <div class="work-box1">
            <div class="text1">一转</div>
        </div>
        <div class="work-box2">
            <div class="text1">二转</div>
        </div>
        <div class="work-box3">
            <div class="text1">三转</div>
        </div>
        <div class="circle-container">
            <img src="头像.jpg" alt="圆形框内的图片" class="circle-image">
        </div>
        <div class="equip-box">
            <div class="equip-text1">武器<br>副手<br>头肩<br>上身<br>腰部<br>下身<br>脚部<br>戒指<br>手镯<br>项链</div>
            <div class="equip-text2">武器名<br>副手名<br>头肩名<br>上身名<br>腰部名<br>下身名<br>脚部名<br>戒指名<br>手镯名<br>项链名</div>
        </div>
        <div class="att-box1">
            <div class="att-inbox1">
                <div class="text3">四维</div>
            </div>
            <div class="att-inbox2">
                <div class="text2">基础</div>
            </div>
            <div class="att-inbox3">
                <div class="text2">加点</div>
            </div>
            <div class="att-inbox4">
                <div class="text2">体魄</div>
            </div>
            <div class="att-inbox5">
                <div class="text2">精血</div>
            </div>
            <div class="att-inbox6">
                <div class="text2">进化</div>
            </div>
            <div class="att-inbox7">
                <div class="text2">装备</div>
            </div>
            <div class="att-inbox8">
                <div class="text2">最终</div>
            </div>
            <div class="att-inbox11">
                <div class="att-text1">💚<br>属性101<br>属性102<br>属性103<br>属性104<br>属性105<br>属性106<br>属性107</div>
            </div>
            <div class="att-inbox12">
                <div class="att-text1">⚡️<br>属性201<br>属性202<br>属性203<br>属性204<br>属性205<br>属性206<br>属性207</div>
            </div>
            <div class="att-inbox13">
                <div class="att-text1">💪<br>属性301<br>属性302<br>属性303<br>属性304<br>属性305<br>属性306<br>属性307</div>
            </div>
            <div class="att-inbox14">
                <div class="att-text1">🧠<br>属性401<br>属性402<br>属性403<br>属性404<br>属性405<br>属性406<br>属性407</div>
            </div>
        </div>
    </div>
</body>
</html>